<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 3 | General Form Elements</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="/AdminLTE-3.0.5/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/AdminLTE-3.0.5/dist/css/adminlte.min.css">
    <link rel="stylesheet" href="/dist/admin/css/optimization.css">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="#" class="nav-link">Home</a>
            </li>
        </ul>

        

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <!-- Messages Dropdown Menu -->

            <!-- Notifications Dropdown Menu -->
            <li class="nav-item dropdown">
                <a class="nav-link" data-toggle="dropdown" href="#">
                    <i class="far fa-bell"></i>
                    <span class="badge badge-warning navbar-badge">个人操作</span>
                </a>
                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                    <span class="dropdown-item dropdown-header">操作面板</span>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <i class="fas fa-envelope mr-2"></i> 个人资料
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <i class="fas fa-file mr-2"></i> 3 new reports
                        <span class="float-right text-muted text-sm">2 days</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="/adminRest/v1/token?_ajax_method=DELETE" class="dropdown-item dropdown-footer" onclick="logout(this);" data-rest-type="DELETE">退出登录</a>
                </div>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="#" class="brand-link">
            <img src="/AdminLTE-3.0.5/dist/img/AdminLTELogo.png"
                 alt="AdminLTE Logo"
                 class="brand-image img-circle elevation-3"
                 style="opacity: .8">
            <span class="brand-text font-weight-light">AdminLTE 3</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar user (optional) -->

            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <li class="nav-header" id="sidebar-menu"></li>
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>General Form</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">General Form</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <!-- left column -->
                    <div class="col-md-8">
                        <!-- general form elements -->
                        <div class="card card-primary">
                            <div class="card-header">
                                <h3 class="card-title">Quick Example</h3>
                            </div>
                            <!-- /.card-header -->
                            <!-- form start -->
                            <form role="form" id="ajaxFormAdd" method="POST" action="/adminRest/v1/menu">
                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="title">标题</label>
                                        <input name="title" type="text" class="form-control" id="title"
                                               placeholder="标题">
                                    </div>
                                    <div class="form-group">
                                        <label for="pid">上级ID</label>
                                        <select class="form-control col-md-4" name="pid" id="pid" >
                                            <option value="0">顶级</option>
                                        </select>
                                        <!--<input name="pid" type="text" class="form-control" id="pid" placeholder="上级ID">-->
                                    </div>
                                    <div class="form-group">
                                        <label for="sort">排序（同级有效）</label>
                                        <input name="sort" type="text" class="form-control" id="sort"
                                               placeholder="排序">
                                    </div>
                                    <div class="form-group">
                                        <label for="pathname">路径</label>
                                        <input name="pathname" type="text" class="form-control" id="pathname"
                                               placeholder="路径">
                                    </div>
                                    <div class="form-group">
                                        <label for="iconfont">图标</label>
                                        <input name="iconfont" type="text" class="form-control" id="iconfont"
                                               placeholder="图标">
                                    </div>
                                </div>
                                <!-- /.card-body -->

                                <div class="card-footer">
                                    <button type="submit" class="btn btn-primary">提交</button>
                                </div>
                            </form>
                        </div>
                        <!-- /.card -->

                    </div>
                </div>
                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <footer class="main-footer">
        
    </footer>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="/AdminLTE-3.0.5/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/AdminLTE-3.0.5/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- bs-custom-file-input -->
<script src="/AdminLTE-3.0.5/plugins/bs-custom-file-input/bs-custom-file-input.min.js"></script>
<!-- AdminLTE App -->
<script src="/AdminLTE-3.0.5/dist/js/adminlte.min.js"></script>

<script src="/plugins/jquery.form.js"></script>
<script src="/plugins/jquery-tmpl/jquery.tmpl.js"></script>

<script id="sidebar-level-1" type="text/x-jquery-tmpl">
{{if $data._child}}
<li class="nav-item has-treeview">
    <a href="${pathname}" class="nav-link">
    <i class="nav-icon fas fa-tachometer-alt"></i>
    <p>
    ${title}
    <i class="right fas fa-angle-left"></i>
    </p>
    </a>
    <ul class="nav nav-treeview">
    {{tmpl($data._child) '#sidebar-level-1'}}
</ul>
</li>
{{else}}
<li class="nav-item">
    <a href="${pathname}" class="nav-link">
    <i class="nav-icon far fa-image"></i>
    <p>
    ${title}
    </p>
    </a>
    </li>
{{/if}}
</script>
<link rel="stylesheet" href="/plugins/jquery-toast-plugin-1.3.2/dist/jquery.toast.min.css">
<script src="/plugins/jquery-toast-plugin-1.3.2/dist/jquery.toast.min.js"></script>
<script src="/dist/js/admin.common.js"></script>
<script id="pid-select" type="text/x-jquery-tmpl">
    <option value="${menu_id}">${title_show}</option>
</script>
<script>
    window.sourceUrl = window.location.origin + "/adminRest/v1/menu";

    function initMenuSelect() {
        $.ajax({
            url: window.location.origin + "/adminRest/v1/MenuTree",
            method: 'GET',
            async: true,
            success: function (res) {
                console.log(res);
                $('#pid-select').tmpl(res.data).appendTo('#pid');
            }
        })
    }
    initMenuSelect();
</script>
<script type="text/javascript">
    // $(document).ready(function () {
    //     bsCustomFileInput.init();
    // });
</script>
</body>
</html>
